<!-- 日常养护计量申请审批 -->
<template>
    <div class="page-list">
        <div class="left">
            <TitleTips title="日常养护合同"></TitleTips>
            <div v-if="contractList.length > 0" v-loading="schemeLoading" class="list">
                <el-tree :data="contractList" :default-expanded-keys="expandedKeys" node-key="id" :default-checked-keys="[0]" :props="defaultProps" highlight-current @node-click="handleNodeDetail">
                    <div slot-scope="{ node, data }" class="custom-tree-node">
                        <span style="display: flex;align-items: center;">
                            <IconSvg v-if="!node.isLeaf && node.expanded" icon-class="file-open" class="file-icon"></IconSvg>
                            <IconSvg v-if="!node.isLeaf && !node.expanded" icon-class="file" class="file-icon"></IconSvg>
                            <IconSvg v-if="node.isLeaf" icon-class="catalogue" class="catalogue-icon"></IconSvg>
                            <!-- <span v-if="node.isLeaf" class="node-label g-line-1">
                                {{ data.projectName || data.highwayName }}
                            </span> -->
                            <TextTooltip  :content="data.projectName || data.highwayName" :ref-name="`${data.id}-${data.projectName}`" :class-name="`parent-node`"></TextTooltip>
                        </span>

                        <el-dropdown v-if="!node.isLeaf" trigger="click">
                            <div style="padding: 2px 4px;" @click.stop>
                                <i class="el-icon-more more-icon" style="transform: rotate(90deg); cursor: pointer;"></i>
                            </div>
                            <el-dropdown-menu slot="dropdown" class="contract-dropdown">
                                <div>合同编号：{{ data.code }}</div>
                                <div>工期：{{ data.startDate }}~{{ data.endDate }}</div>
                                <div class="color-blue" style="cursor: pointer;" @click="handleToContaractDetail(data.id)"><i class="el-icon-document" style="font-size: 15px;"></i> 查看合同</div>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-tree>
            </div>
            <div v-else class="no-data">
                <IconSvg icon-class="no-data2" class="icon"></IconSvg>
                <span>暂无数据，<i class="button" @click="handleAddContract">前往配置合同</i></span>
            </div>
        </div>
        <BasePage style="flex: 1; position: relative;">
            <StatePannel slot="status" :status.sync="status"></StatePannel>
            <el-checkbox v-model="checked" class="only-self">仅显示需要我审批的数据</el-checkbox>
            <el-form slot="form" :inline="true" size="medium">
                <el-form-item label="计量申请ID">
                    <el-input v-model="query.id" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="申请时间">
                    <el-date-picker
                        v-model="query.time"
                        style="width: 300px;"
                        type="datetrange"
                        value-format="yyyy-MM-dd "
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="query.type" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="计量周期">
                    <el-date-picker
                        v-model="query.cycle"
                        type="month"
                        format="yyyy-MM"
                        value-format="yyyy-MM"
                        style="width: 100%;"
                        placeholder="请选择"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <BaseButton v-permission="{ btnCode: 'dlyh_c86_d418_2' }" @click="handleFilter">查询</BaseButton>
                    <BaseButton v-permission="{ btnCode: 'dlyh_c86_d418_2' }" type="second" @click="resetConditions()">重置</BaseButton>
                </el-form-item>
            </el-form>
            <BaseTable slot="table" ref="table" v-loading="listLoading" :data="list" :columns="columns" highlight-current-row height="calc(100% - 73px)" @sort-change="handleSortChange">
                <template #id="{ scope: {row } }">
                    <BaseButton type="text" @click="handleDetail(row.id)">{{ row.id }} </BaseButton>
                </template>
                <template #stakeNoRange="{ scope: {row } }">
                    <span>
                        {{ row.highwayName }}
                    </span>
                    <span v-if="row.roadSection && row.scope !== 1">（{{ row.roadSection }}）</span>
                    <span v-if="row.stakeNoRange && row.scope !== 1">-{{ row.stakeNoRange }}</span>
                </template>
                <template #type="{ scope: {row } }">
                    {{ row.type | value2Name(types) }}
                </template>
                <template #status="{ scope: {row } }">
                    <div style="display: flex; align-items: center;">
                        <StateTag :id="row.status"></StateTag>
                        <span v-if="row.status === 1 " style="font-size: 14px;">（待{{ row.currentApprover.approverLevel }}级审批）</span>
                    </div>
                </template>
                <template #action="{ scope: { row } }">
                    <BaseButton v-permission="{ btnCode: 'dlyh_c86_d419_2' }" type="text" @click="handleDetail(row.id)"> 查看 </BaseButton>
                    <BaseButton v-show="isApproveNode(row)" v-permission="{ btnCode: 'dlyh_c86_d420_2' }" type="text" @click="handleDetail(row.id)"> 审批 </BaseButton>
                </template>
            </BaseTable>
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @size-change="getList"
                @current-change="getList"
            />
        </BasePage>
    </div>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { ApplicationModel, MsMaintrecordModel } from '@/models'
import StatePannel from './components/StatePannel.vue'
import StateTag from '../metrological-application/components/StateTag.vue'
import { value2Name } from '@/filters'

export default {
    name: 'ApplyList',
    components: {
        BasePage,
        StatePannel,
        StateTag,
    },
    filters: {
        value2Name
    },
    data() {
        return {
            model: new ApplicationModel(),
            msMaintrecordModel: new MsMaintrecordModel(),
            defaultProps: {
                children: 'maintScopeList',
                label: 'projectName'
            },
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            listLoading: false,
            query: {
                statusList: [1, 2, 3], // 审批状态
                time: [],
                startApplicationTime: '', // 开始申请时间
                endApplicationTime: '', // 结束申请时间
                id: '',
                type: '', // 类型
                cycle: '', // 周期
                sort: 1,
                contractId: '', // 合同ID
                highwayCode: '', // 高速公路
                mine: false, // 是否显示仅待我审批的数据
                queryApprovalList: true // 是否查询审批列表
            },
            status: '',
            columns: [
                {
                    slot: 'id',
                    attrs: {
                        label: '计量申请ID',
                        prop: 'id',
                        'min-width': 80
                    }
                },
                {
                    attrs: {
                        label: '申请时间',
                        prop: 'createTime',
                        'show-overflow-tooltip': true,
                        sortable: 'custom',
                        'min-width': 100
                    }
                },
                {
                    attrs: {
                        label: '申请人',
                        prop: 'applicantName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'type',
                    attrs: {
                        label: '类型',
                        prop: 'type',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '计量周期',
                        prop: 'cycle',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '项目名称',
                        prop: 'contractProjectName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'stakeNoRange',
                    attrs: {
                        label: '养护范围',
                        prop: 'stakeNoRange',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '施工单位',
                        prop: 'constructionUnitName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        label: '审批状态',
                        'show-overflow-tooltip': true,
                        width: 200
                    }
                },
                {
                    attrs: {
                        label: '更新时间',
                        prop: 'updateTime',
                        sortable: 'custom',
                        'min-width': 100
                    }
                },
                {
                    slot: 'action',
                    attrs: {
                        label: '操作',
                        width: '200',
                    }
                }
            ],
            list: [],
            schemeLoading: false, // 合同列表loading
            contractList: '', // 合同树形list
            // 选择的合同信息
            chapter: {
                projectName: '全部',
                id: 0
            },
            checked: false, // 仅显示需要我审批的数据
            expandedKeys: [] // 默认展开的节点id

        }
    },
    computed: {
        types() {
            return this.$store.state.types.maintenanceApplyTypes || []
        },
        userInfo() {
            return this.$store.state.user.avatar || {}
        }
    },
    watch: {
        'query.time'(val) {
            if (val && val.length) {
                this.query.startApplicationTime = val[0]
                this.query.endApplicationTime = val[1]
            } else {
                this.query.startApplicationTime = ''
                this.query.endApplicationTime = ''
            }
        },
        status(val) {
            if (val) {
                this.query.statusList = [val]
            } else {
                this.query.statusList = [1, 2, 3]
            }
            this.handleFilter()
        },
        checked: {
            immediate: true,
            handler(val) {
                this.query.mine = val
                this.handleFilter()
            }

        },
    },
    async created() {
        this.getTypes()
        await this.getChapterList()
        this.initList()
    },
    methods: {
        // 合同详情
        handleToContaractDetail(id) {
            this.$router.push({
                name: 'ContractDetail',
                query: { id }
            })
        },
        // 前往配置合同
        handleAddContract() {
            this.$router.push({ name: 'ContractAdd'})
        },
        // 章次列表
        getChapterList() {
            this.schemeLoading = true
            return this.msMaintrecordModel
                .contractTreeList({ isAllContract: true})
                .then(res => {
                    const list = res || []
                    this.contractList = [{id: 0, projectName: '全部'}].concat(list)
                    this.expandedKeys = this.contractList.map(el => el.id)
                })
                .finally(() => {
                    this.schemeLoading = false
                })
        },
        initList() {
            const active = this.contractList[0] || {}
            this.chapterCode = active.code
            this.getList()
        },
        // 选择节点
        handleNodeDetail(data, node) {
            if (node.isLeaf) {
                const { id: contractId, projectName, contractorId, contractorName, name} = node.parent.data
                this.chapter = {
                    ...data,
                    contractInfo: {
                        contractId, projectName, contractorId, contractorName, name
                    }
                }
                this.query.contractId = contractId
                this.query.highwayCode = data.highwayCode
                this.getList()
            }
        },
        // store
        getTypes() {
            this.$store.dispatch('types/query', 'maintenanceApplyTypes')
        },
        // 排序
        handleSortChange({ column, prop, order }) {
            if (prop === 'updateTime') {
                if (order === 'ascending') {
                    this.query.sortFields = [
                        {
                            sortFieldName: 'update_time',
                            sortType: 'asc'
                        }
                    ]
                } else if (order === 'descending') {
                    this.query.sortFields = [
                        {
                            sortFieldName: 'update_time',
                            sortType: 'desc'
                        }
                    ]
                } else {
                    this.query.sortFields = []
                }
            }
            if (prop === 'createTime') {
                if (order === 'ascending') {
                    this.query.sortFields = [
                        {
                            sortFieldName: 'create_time',
                            sortType: 'asc'
                        }
                    ]
                } else if (order === 'descending') {
                    this.query.sortFields = [
                        {
                            sortFieldName: 'create_time',
                            sortType: 'desc'
                        }
                    ]
                } else {
                    this.query.sortFields = []
                }
            }
            this.getList()
        },

        // 详情
        handleDetail(id) {
            this.$router.push({
                path: './detail',
                query: {
                    id: id,
                    pageType: 'approve'
                }
            })
        },
        // 是否是当前审批节点
        isApproveNode(row) {
            const userId = this.userInfo.id
            if (row.currentApprover) {
                if (Number(row.currentApprover.approverId) === Number(userId)) {
                    return true
                } else {
                    return false
                }
            } else {
                return false
            }
        },

        // 列表数据
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        getList() {
            this.listLoading = true
            this.model
                .getApplyList(this.query, this.page)
                .then((res) => {
                    if (res) {
                        this.list = res.list
                        this.page.total = res.totalCount
                    } else {
                        this.list = []
                        this.page.total = 0
                    }
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        resetConditions() {
            this.query.id = ''
            this.query.startApplicationTime = ''
            this.query.endApplicationTime = ''
            this.query.type = ''
            this.query.cycle = ''
            this.query.time = []
            this.handleFilter()
        }

    }
}
</script>

<style lang="scss" scoped>
.page-list{
    display: flex;
    .left {
        width: 280px;
        height: 100%;
        margin-right: 16px;
        flex-shrink: 0;
        border: 1px solid #f0f4f7;
        box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.14);
        padding: 24px 16px;
        .list {
            height: calc(100% - 38px);
            overflow-y: auto;
        }
        .custom-tree-node {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 8px 0;

            .file-icon {
                font-size: 22px;
                margin-right: 4px;
            }
            .catalogue-icon {
                font-size: 18px;
                margin-right: 4px;
            }
            .node-label {
                max-width: 210px;
                font-size: 14px;
            }
            .more-icon {
                display: none;
            }
        }
        .file-icon {
            font-size: 22px;
            margin-right: 4px;
        }
        .catalogue-icon {
            font-size: 18px;
            margin-right: 4px;
        }
    }
     /* 替换默认展开收起图片 */
     ::v-deep {
        // 树结构重置前面图标
        .el-tree-node__expand-icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            background: url("~@/assets/images/zhankai.png") no-repeat;
            background-size: 100% 100%;
            margin-left: 8px;

        }
        .el-tree-node__expand-icon.is-leaf {
            visibility: hidden;
        }
        .el-icon-caret-right:before {
            content: '';
        }

        .el-tree-node__expand-icon.expanded {
            transform: none;
            background: url("~@/assets/images/shouqi.png") no-repeat;
            background-size: 100% 100%;
            margin-right: 4px;
        }
        .el-tree-node__content {
            height: auto;
            padding-right: 8px;
        }
        .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,
        .el-tree-node__content:hover {
            background-color: rgba(0, 98, 255, 0.06);
        }

        .el-tree-node__content:hover .more-icon {
            display: block;
        }

        }

}
.contract-dropdown {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.8;
}
.only-self{
    position: absolute;
    right: 20px;
    top: 30px;
}
</style>
<style lang="scss">
.parent-node{
    width: 160px;
    font-size: 14px;
}
</style>
